CSS लॉजिकल बॉक्स मॉडेल: ग्लोबल वेब विकासासाठी लेखन मोडनुसार लेआउट गुणधर्म

वेब एक जागतिक मंच आहे, आणि विकासक म्हणून, आपली भाषा किंवा सांस्कृतिक पार्श्वभूमी विचारात न घेता, प्रत्येकासाठी प्रवेशयोग्य आणि वापरण्यायोग्य वेबसाइट्स तयार करणे ही आपली जबाबदारी आहे. हे साध्य करण्याचा एक महत्त्वाचा पैलू म्हणजे CSS लॉजिकल बॉक्स मॉडेल आणि त्याचे लेखन मोडनुसार लेआउट गुणधर्म समजून घेणे आणि वापरणे. हे गुणधर्म आपल्याला विविध लेखन प्रकारांशी (क्षैतिज, अनुलंब) आणि मजकूर दिशानिर्देशांशी (डावीकडून उजवीकडे, उजवीकडून डावीकडे) जुळणारे लेआउट तयार करण्यास अनुमती देतात, ज्यामुळे सर्व वापरकर्त्यांसाठी सुसंगत आणि वापरकर्ता-अनुकूल अनुभव सुनिश्चित होतो.

शारीरिक आणि लॉजिकल बॉक्स मॉडेल समजून घेणे

परंपरागतपणे, margin-top, margin-right, margin-bottom आणि margin-left सारखे CSS गुणधर्म स्क्रीनच्या भौतिक परिमाणांशी जोडलेले असतात. याला शारीरिक बॉक्स मॉडेल म्हणून ओळखले जाते. जे भाषा डावीकडून उजवीकडे आणि वरून खाली वाचतात त्यांच्यासाठी हे अंतर्ज्ञानी असले तरी, इतर लेखन पद्धतींशी व्यवहार करताना ते समस्याप्रधान होते.

दुसरीकडे, लॉजिकल बॉक्स मॉडेल, लेखन मोड आणि मजकूर दिशेनुसार गुणधर्म वापरते. top, right, bottom, आणि left ऐवजी, ते block-start, inline-end, block-end, आणि inline-start सारखे गुणधर्म वापरते. हे अमूर्तता लेआउटला लेखन मोडवर आधारित आपोआप जुळवून घेण्यास अनुमती देते, ज्यामुळे जटिल सशर्त स्टाईलची आवश्यकता दूर होते.

महत्वाचेCONCEPTS: लेखन मोड्स आणि मजकूर दिशा

गुणधर्मांमध्ये जाण्यापूर्वी, लेखन मोड आणि मजकूर दिशानिर्देशांच्या मुख्य संकल्पना समजून घेणे आवश्यक आहे.

लेखन मोड्स

writing-mode CSS गुणधर्म हे निर्दिष्ट करतो की मजकुराच्या ओळी क्षैतिज किंवा अनुलंब ठेवल्या आहेत का. हे खालील मूल्ये घेऊ शकते:

• horizontal-tb: डीफॉल्ट. मजकूर क्षैतिज दिशेने, डावीकडून उजवीकडे (LTR भाषांमध्ये) किंवा उजवीकडून डावीकडे (RTL भाषांमध्ये) आणि अनुलंब दिशेने, वरून खाली वाहतो.
• vertical-rl: मजकूर अनुलंब दिशेने, वरून खाली वाहतो आणि क्षैतिज दिशेने, उजवीकडून डावीकडे वाहतो. हे सामान्यतः पारंपारिक पूर्व आशियाई लिपींमध्ये वापरले जाते.
• vertical-lr: मजकूर अनुलंब दिशेने, वरून खाली वाहतो आणि क्षैतिज दिशेने, डावीकडून उजवीकडे वाहतो. कमी सामान्य, पण तरीही काही पूर्व आशियाई संदर्भांमध्ये वापरले जाते.

उदाहरण:

            .vertical-rl {
  writing-mode: vertical-rl;
}

            

              
                Copy
              
            
          

मजकूर दिशा

direction CSS गुणधर्म हे निर्दिष्ट करतो की इनलाइन सामग्री कोणत्या दिशेने वाहते. हे प्रामुख्याने उजवीकडून-डावीकडे (RTL) वाचल्या जाणार्‍या भाषांसाठी वापरले जाते, जसे की अरबी आणि हिब्रू.

• ltr: डावीकडून-उजवीकडे दिशा (डीफॉल्ट).
• rtl: उजवीकडून-डावीकडे दिशा.

उदाहरण:

            .rtl {
  direction: rtl;
}

            

              
                Copy
              
            
          

टीप: direction गुणधर्म इनलाइन मजकुराच्या दिशेवर आणि लॉजिकल बॉक्स मॉडेलमध्ये start आणि end सारख्या गुणधर्मांच्या अर्थावर परिणाम करतो.

लॉजिकल गुणधर्म आणि मूल्ये

खालील CSS गुणधर्म लॉजिकल बॉक्स मॉडेलचा भाग आहेत आणि लेखन मोडनुसार जागरूक आहेत. ते आपण वापरलेल्या भौतिक गुणधर्मांची जागा घेतात आणि लेआउट नियंत्रित करण्याचा अधिक लवचिक आणि आंतरराष्ट्रीय मार्ग प्रदान करतात.

मार्जिन गुणधर्म

• margin-block-start: horizontal-tb मोडमध्ये margin-top च्या समतुल्य.
• margin-block-end: horizontal-tb मोडमध्ये margin-bottom च्या समतुल्य.
• margin-inline-start: ltr मोडमध्ये margin-left आणि rtl मोडमध्ये margin-right च्या समतुल्य.
• margin-inline-end: ltr मोडमध्ये margin-right आणि rtl मोडमध्ये margin-left च्या समतुल्य.

उदाहरण:

            .box {
  margin-block-start: 20px; /* Top margin in horizontal mode */
  margin-block-end: 30px;   /* Bottom margin in horizontal mode */
  margin-inline-start: 10px;  /* Left margin in LTR, Right in RTL */
  margin-inline-end: 15px;   /* Right margin in LTR, Left in RTL */
}

            

              
                Copy
              
            
          

पॅडिंग गुणधर्म

मार्जिन्स प्रमाणेच, पॅडिंगमध्ये देखील लॉजिकल समतुल्य आहेत:

• padding-block-start: horizontal-tb मोडमध्ये padding-top च्या समतुल्य.
• padding-block-end: horizontal-tb मोडमध्ये padding-bottom च्या समतुल्य.
• padding-inline-start: ltr मोडमध्ये padding-left आणि rtl मोडमध्ये padding-right च्या समतुल्य.
• padding-inline-end: ltr मोडमध्ये padding-right आणि rtl मोडमध्ये padding-left च्या समतुल्य.

उदाहरण:

            .box {
  padding-block-start: 10px;
  padding-block-end: 10px;
  padding-inline-start: 20px;
  padding-inline-end: 20px;
}

            

              
                Copy
              
            
          

बॉर्डर गुणधर्म

लॉजिकल बॉर्डर गुणधर्म समान नमुन्याचे अनुसरण करतात:

• border-block-start, border-block-start-width, border-block-start-style, border-block-start-color
• border-block-end, border-block-end-width, border-block-end-style, border-block-end-color
• border-inline-start, border-inline-start-width, border-inline-start-style, border-inline-start-color
• border-inline-end, border-inline-end-width, border-inline-end-style, border-inline-end-color

शॉर्टहँड गुणधर्म देखील उपलब्ध आहेत:

• border-block: border-block-start आणि border-block-end साठी शॉर्टहँड.
• border-inline: border-inline-start आणि border-inline-end साठी शॉर्टहँड.

उदाहरण:

            .box {
  border-block-start: 2px solid black;
  border-inline-end: 1px dashed gray;
}

            

              
                Copy
              
            
          

ऑफसेट गुणधर्म

पोझिशनिंगसाठी top, right, bottom, आणि left ऐवजी, वापरा:

• inset-block-start: horizontal-tb मध्ये वरील कडेपासूनचे अंतर.
• inset-block-end: horizontal-tb मध्ये खालच्या कडेपासूनचे अंतर.
• inset-inline-start: ltr मध्ये डाव्या कडेपासूनचे अंतर किंवा rtl मध्ये उजव्या कडेपासूनचे अंतर.
• inset-inline-end: ltr मध्ये उजव्या कडेपासूनचे अंतर किंवा rtl मध्ये डाव्या कडेपासूनचे अंतर.

शॉर्टहँड गुणधर्म:

• inset: सर्व चार इनसेट गुणधर्मांसाठी शॉर्टहँड, top, right, bottom, left ऑर्डरचे अनुसरण करून (परंतु तार्किकदृष्ट्या).

उदाहरण:

            .box {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 20px;
}

            

              
                Copy
              
            
          

डायमेन्शन गुणधर्म

रुंदी आणि उंची निर्दिष्ट करण्यासाठी, वापरा:

• block-size: लेखन मोडवर अवलंबून, एकतर घटकाची उंची किंवा रुंदी दर्शवते. क्षैतिज लेखन पद्धतींमध्ये, ते अनुलंब परिमाणाशी (उंची) संबंधित आहे; अनुलंब लेखन पद्धतींमध्ये, ते क्षैतिज परिमाणाशी (रुंदी) संबंधित आहे.
• inline-size: लेखन मोडवर अवलंबून, एकतर घटकाची रुंदी किंवा उंची दर्शवते. क्षैतिज लेखन पद्धतींमध्ये, ते क्षैतिज परिमाणाशी (रुंदी) संबंधित आहे; अनुलंब लेखन पद्धतींमध्ये, ते अनुलंब परिमाणाशी (उंची) संबंधित आहे.
• min-block-size: किमान ब्लॉक आकार.
• max-block-size: कमाल ब्लॉक आकार.
• min-inline-size: किमान इनलाइन आकार.
• max-inline-size: कमाल इनलाइन आकार.

उदाहरण:

            .box {
  block-size: 200px;  /* Height in horizontal mode, Width in vertical mode */
  inline-size: 300px; /* Width in horizontal mode, Height in vertical mode */
}

            

              
                Copy
              
            
          

व्यावहारिक उदाहरणे आणि वापर प्रकरणे

अधिक जुळवून घेता येण्याजोगे आणि आंतरराष्ट्रीयीकृत लेआउट तयार करण्यासाठी लॉजिकल बॉक्स मॉडेलचा उपयोग कसा करावा याची काही व्यावहारिक उदाहरणे पाहूया.

उदाहरण १: नेव्हिगेशन मेनू तयार करणे

क्षैतिज नेव्हिगेशन मेनूचा विचार करा. फिजिकल बॉक्स मॉडेल वापरून, आपण पहिल्या आयटमवर डावा मार्जिन आणि शेवटच्या आयटमवर उजवा मार्जिन सेट करू शकता. तथापि, RTL भाषेत, मार्जिन उलट केले जातील. लॉजिकल गुणधर्म वापरून, आपण हे सुनिश्चित करू शकता की मार्जिन नेहमी योग्यरित्या लागू केले जातात.

            .nav-item:first-child {
  margin-inline-start: 0; /* No margin on the start in either LTR or RTL */
}

.nav-item:last-child {
  margin-inline-end: 0;   /* No margin on the end in either LTR or RTL */
}

            

              
                Copy
              
            
          

उदाहरण २: साइडबार स्टाईल करणे

कल्पना करा की एक साइडबार आहे जी LTR भाषांमध्ये डावीकडे आणि RTL भाषांमध्ये उजवीकडे दिसायला हवी. प्रत्येक दिशानिर्देशासाठी स्वतंत्र CSS नियम वापरण्याऐवजी, आपण साइडबार योग्यरित्या स्थित करण्यासाठी लॉजिकल गुणधर्म वापरू शकता.

            .sidebar {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0; /* Positions the sidebar on the left in LTR and right in RTL */
  block-size: 100%;
  inline-size: 200px;
}

.content {
  margin-inline-start: 200px; /* Pushes the content to the right in LTR and left in RTL */
}

            

              
                Copy
              
            
          

उदाहरण ३: अनुलंब मजकूर हाताळणे

जेव्हा आपण अनुलंब मजकूर वापरणाऱ्या भाषांवर कार्य करतो (उदा. जपानी, चायनीज), तेव्हा लॉजिकल बॉक्स मॉडेल अधिक महत्त्वपूर्ण होते. आपण writing-mode गुणधर्म अनुलंब लेखन मोडवर स्विच करण्यासाठी वापरू शकता आणि लॉजिकल गुणधर्म आपोआप लेआउट समायोजित करतील.

            .vertical-text {
  writing-mode: vertical-rl;
  margin-block-start: 20px; /* Top margin in vertical mode */
  margin-inline-start: 10px; /* Left margin in vertical mode */
}

            

              
                Copy
              
            
          

लॉजिकल बॉक्स मॉडेल वापरण्याचे फायदे

लॉजिकल बॉक्स मॉडेलचा अवलंब केल्याने अनेक महत्त्वपूर्ण फायदे मिळतात:

• सुधारित आंतरराष्ट्रीयकरण: एकाधिक भाषा आणि लेखन पद्धतींना स्वतंत्र CSS नियमांची आवश्यकता न घेता समर्थन देते. जागतिक प्रेक्षकांसाठी वेबसाइट्स तयार करण्यासाठी हे महत्त्वपूर्ण आहे.
• वर्धित अनुकूलता: अधिक लवचिक आणि जुळवून घेता येण्याजोगे लेआउट तयार करते जे लेखन मोड आणि मजकूर दिशानिर्देशांमधील बदलांना आपोआप प्रतिसाद देतात.
• सोपे विकास: CSS कोडची जटिलता कमी करते आणि त्याची देखभाल करणे सोपे करते. आपल्याला LTR आणि RTL लेआउटसाठी सशर्त शैली लिहिणे टाळता येते.
• वाढलेली सुलभता: सर्व भाषांच्या वापरकर्त्यांसाठी नैसर्गिक आणि अंतर्ज्ञानी पद्धतीने सामग्री सादर करून अधिक प्रवेशयोग्य वेबमध्ये योगदान देते.
• भविष्यातील सुरक्षितता: आधुनिक वेब विकास पद्धतींशी जुळते आणि लेखन मोड आणि मजकूर दिशानिर्देशांमधील भविष्यातील बदलांसाठी आपल्या वेबसाइट्सची तयारी करते.

ब्राउझर सुसंगतता आणि फॉलबॅक

बहुतेक आधुनिक ब्राउझर CSS लॉजिकल गुणधर्म आणि मूल्ये तपशील समर्थन करतात. तथापि, जुन्या ब्राउझरसाठी, आपल्याला पारंपारिक भौतिक गुणधर्म वापरून फॉलबॅक प्रदान करण्याची आवश्यकता असू शकते.

एक सामान्य तंत्र म्हणजे प्रथम भौतिक गुणधर्म वापरणे, त्यानंतर लॉजिकल गुणधर्म. जे ब्राउझर लॉजिकल गुणधर्मांना समर्थन देतात ते भौतिक गुणधर्मांना ओव्हरराइड करतील, तर जुने ब्राउझर फक्त भौतिक गुणधर्म वापरतील.

            .box {
  margin-left: 10px;  /* Fallback for older browsers */
  margin-right: 20px; /* Fallback for older browsers */
  margin-inline-start: 10px;
  margin-inline-end: 20px;
}

            

              
                Copy
              
            
          

आपण लॉजिकल गुणधर्मांना समर्थन देणाऱ्या ब्राउझरसाठी विशिष्ट शैली देण्यासाठी वैशिष्ट्य क्वेरी (@supports) देखील वापरू शकता.

            @supports (margin-inline-start: 0) {
  .box {
    margin-left: auto;  /* Remove fallback */
    margin-right: auto; /* Remove fallback */
    margin-inline-start: auto;
    margin-inline-end: auto;
  }
}

            

              
                Copy
              
            
          

सर्वोत्तम पद्धती आणि टिप्स

• लॉजिकल मॉडेलने प्रारंभ करा: नवीन प्रकल्प तयार करताना, सुरुवातीपासून लॉजिकल बॉक्स मॉडेल वापरण्याचा विचार करा. यामुळे आपल्याला दीर्घकाळात वेळ आणि श्रम वाचतील.
• विद्यमान प्रकल्पांचे हळू हळू स्थलांतर करा: आपल्याकडे विद्यमान प्रकल्प असल्यास, आपण हळू हळू लॉजिकल बॉक्स मॉडेलवर स्थलांतरित करू शकता. सर्वात महत्वाच्या घटकांसह प्रारंभ करा आणि उर्वरित कोडबेसद्वारे कार्य करा.
• CSS प्रीप्रोसेसर वापरा: Sass किंवा Less सारखे CSS प्रीप्रोसेसर आपल्याला CSS कोडची जटिलता व्यवस्थापित करण्यात मदत करू शकतात आणि लॉजिकल बॉक्स मॉडेल वापरणे सोपे करू शकतात. आवश्यक भौतिक गुणधर्म फॉलबॅक तयार करण्यासाठी आपण मिक्सिन किंवा कार्ये तयार करू शकता.
• सखोलपणे परीक्षण करा: लेआउट योग्यरित्या जुळवून घेते हे सुनिश्चित करण्यासाठी विविध लेखन मोड आणि मजकूर दिशानिर्देशांमध्ये आपल्या वेबसाइट्सची चाचणी घ्या. CSS चे परीक्षण करण्यासाठी आणि लॉजिकल गुणधर्म अपेक्षित असल्याप्रमाणे लागू केले जात आहेत की नाही हे सत्यापित करण्यासाठी ब्राउझर डेव्हलपर टूल्स वापरा.
• दस्तऐवजाचा सल्ला घ्या: लॉजिकल बॉक्स मॉडेल आणि त्याच्या गुणधर्मांवरील सर्वात अद्ययावत माहितीसाठी अधिकृत CSS तपशील आणि ब्राउझर दस्तऐवजांचा संदर्भ घ्या.

निष्कर्ष

CSS लॉजिकल बॉक्स मॉडेल आणि लेखन मोडनुसार लेआउट गुणधर्म खऱ्या अर्थाने जागतिक आणि प्रवेशयोग्य वेबसाइट्स तयार करण्यासाठी आवश्यक साधने आहेत. हे गुणधर्म समजून आणि वापरून, आपण विविध भाषा, लेखन मोड्स आणि मजकूर दिशानिर्देशांशी जुळणारे लेआउट तयार करू शकता, जे सर्व वापरकर्त्यांसाठी सुसंगत आणि वापरकर्ता-अनुकूल अनुभव प्रदान करतात. लॉजिकल बॉक्स मॉडेलचा स्वीकार करा आणि प्रत्येकासाठी अधिक समावेशक आणि प्रवेशयोग्य वेब तयार करा.

भौतिक बॉक्स मॉडेलमधून दूर जात आणि लॉजिकल बॉक्स मॉडेलचा स्वीकार करून, आपण जागतिक प्रेक्षकांसाठी खरोखर समावेशक आणि प्रवेशयोग्य वेब अनुभव तयार करण्याच्या दिशेने एक महत्त्वपूर्ण पाऊल उचलत आहात. हे केवळ आपल्या वापरकर्त्यांनाच फायदा देत नाही तर आपल्या प्रकल्पांना भविष्यातही सुरक्षित ठेवते, हे सुनिश्चित करते की ते अधिकाधिक विविध डिजिटल वातावरणात संबंधित आणि जुळवून घेण्यासारखे राहतील.

पुढील वाचन आणि संसाधने

• MDN वेब डॉक्स: CSS लॉजिकल गुणधर्म आणि मूल्ये
• W3C CSS लॉजिकल गुणधर्म आणि मूल्ये स्तर 1
• अहमद शदीद द्वारे CSS लॉजिकल गुणधर्म